<template>
<a-menu mode="inline"   v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeyList" @openChange="onOpenChange"
    v-bind="options" class="wh" style="overflow-y: auto;overflow-x: hidden;">
    <template v-for="item in menuList" :key="item.path" >
        <home-menu-item :menuData="item" :openKeys="openKeys" v-if="item.meta.isShow!==false"></home-menu-item>
    </template>
</a-menu>
</template>

<script lang="ts">
import { defineComponent, ref, PropType, onMounted } from 'vue'
import HomeMenuItem from './HomeMenuItem.vue'
export default defineComponent({
  name: 'wd_home_menu',
  props: {
    menuList: {
      type: Object as PropType < any[] >,
      required: true
    },
    selectedKeys: {
      type: Array as PropType < string[] >
    },
    isOpenAll: {
      type: Boolean as PropType < boolean >,
      default: () => false
    },
    options: {
      type: Object as PropType < any >
    }
  },
  setup (props) {
    const openKeys = ref < string[] >(['123'])
    const onOpenChange = (data: string[]) => {
      const latestOpenKey = data.find(key => openKeys.value.indexOf(key) === -1)
      if (props.menuList.findIndex(item => item.path === data) === -1) {
        openKeys.value = data
      } else {
        openKeys.value = latestOpenKey ? [latestOpenKey] : []
      }
    }
    const selectedKeyList = ref(props.selectedKeys)
    onMounted(() => {
      if (props.isOpenAll === true) {
        openKeys.value = props.menuList ? props.menuList.map(item => item.path) : []
      }
    })
    const setOpenKeys = (keys:string[]) => {
      openKeys.value = keys
    }
    return {
      setOpenKeys,
      selectedKeyList,
      onOpenChange,
      openKeys
    }
  },
  methods: {},
  components: {
    HomeMenuItem
  }
})
</script>
